<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="会员名称">
          <a-input
            v-model:value="pageSet.memberName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="主体信息">
          <a-input
            v-model:value="pageSet.bodyName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
      </a-form>

      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="construction(record)"
              >查看</span
            >
          </template>
        </template>
      </a-table>
      <a-modal
        v-model:open="visible"
        width="800px"
        :title="title"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 6}" :model="form" ref="formRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="主体信息" name="bodyName">
                  <a-input v-model:value="form.bodyName" />
                </a-form-item>
                <a-form-item label="报价时间" name="createdTime">
                  <a-input v-model:value="form.createdTime" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="会员信息" name="memberName">
                  <a-input v-model:value="form.memberName" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <a-table
            size="small"
            :dataSource="form.exportProducts"
            :columns="columns1"
            bordered
            :pagination="false"
            :scroll="{
              x: 700,
              y: 500
            }"
          >
            <template #bodyCell="{text, record, index, column}">
              <template v-if="column.title == '含税单价'">
                <span>{{ text }}</span
                ><br />
                <!-- <span>不含：{{ record.price }}</span> -->
              </template>
              <template v-if="column.title == '含税小计'">
                <span>{{ text }}</span
                ><br />
                <!-- <span>不含：{{ record.amount }}</span> -->
              </template>
            </template>
          </a-table>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button @click="visible = false" type="primary">确定</a-button>
          </div>
        </div>
      </a-modal>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onActivated, inject} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {
  exportLogPage,
  exportLogDetail
} from "@/api/orderManagement/exportingInformation";
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const formRef = ref();
const form = ref<any>({});
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const visible = ref(false);
const modalloading = ref(false);
const title = ref("日志信息");
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
//操作
const construction = (data) => {
  useAppStore.loading = true;
  exportLogDetail({id: data.id})
    .then((res) => {
      form.value = data;
      visible.value = true;
    })
    .finally(() => {
      useAppStore.loading = false;
    });
};
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  exportLogPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
const tableData = ref<Array<object>>([]);
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "会员名称",
    dataIndex: "memberName",
    align: "center",
    width: 150
  },
  {
    title: "主体名称",
    dataIndex: "bodyName",
    align: "center",
    width: 150
  },
  {
    title: "报价单号",
    dataIndex: "quotationCode",
    align: "center",
    width: 150
  },
  {
    title: "报价时间",
    dataIndex: "createdTime",
    align: "center",
    width: 200
  },
  {
    title: "操作",
    dataIndex: "d",
    align: "center",
    width: 100,
    fixed: "right"
  }
]);
const columns1 = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "商品名称",
    dataIndex: "productName",
    align: "center",
    width: 200
  },
  {
    title: "商品编号",
    dataIndex: "productCode",
    align: "center",
    width: 120
  },
  {
    title: "主计量单位",
    dataIndex: "measureUnit",
    align: "center",
    width: 100
  },
  {
    title: "含税单价",
    dataIndex: "taxPrice",
    align: "center",
    width: 100
  },
  {
    title: "下单数量",
    dataIndex: "num",
    align: "center",
    width: 100
  },
  {
    title: "含税小计",
    dataIndex: "taxAmount",
    align: "center",
    width: 100
  },
  {
    title: "报价日期",
    dataIndex: "createdTime",
    align: "center",
    width: 100
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center",
    width: 100
  }
]);
loadPagination(true);
</script>

<style lang="less" scoped></style>
